<template>
  <v-chart class="chart" :option="options" :init-options="{ renderer: renderer }" />
</template>

<script setup>
import { use } from 'echarts/core'
import { CanvasRenderer, SVGRenderer } from 'echarts/renderers'
import { RadarChart, BarChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import VChart from 'vue-echarts'

use([
  CanvasRenderer,
  TitleComponent,
  GridComponent,
  SVGRenderer,
  TooltipComponent,
  LegendComponent,
  RadarChart,
  BarChart
])

defineProps({
  options: {
    type: Object,
    default() {
      return {}
    }
  },
  renderer: {
    type: String,
    default: 'canvas'
  }
})
</script>

<style scoped>
.chart {
  height: 200px;
}
</style>
